<template>
  <ph-view>
    <ph-divider>基本功能展示</ph-divider>
    <ph-button-group :container="true">
      <ph-button @click="open">打开窗口</ph-button>
      <ph-button @click="openConfirm">打开confirm</ph-button>
      <ph-button @click="openAlert">打开alert</ph-button>
    </ph-button-group>
    <ph-tab>
      <ph-tab-panel title="窗口介绍">
        <ph-pretty>{{ baseWindow }}</ph-pretty>
        <ph-button @click="open">打开窗口</ph-button>
        <ph-pretty>{{ windowDemo }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="confirm介绍">
        <ph-pretty>{{ baseConfirm }}</ph-pretty>
        <ph-button @click="openConfirm">打开confirm</ph-button>
        <ph-pretty>{{ confirmDemo }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="alert介绍">
        <ph-pretty>{{ baseAlert }}</ph-pretty>
        <ph-button @click="openAlert">打开alert</ph-button>
        <ph-pretty>{{ alertDemo }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ code }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
    <ph-window
      :visible="visible"
      @done="onDone"
      @close="onClose"
      @mask-click="onDone"
    >
      <template v-slot:title> this is title </template>
      <p>阿斯利康减肥撒风</p>
      <p>阿斯利康减肥撒风</p>
      <p>阿斯利康减肥撒风</p>
      <p>阿斯利康减肥撒风</p>
      <p>阿斯利康减肥撒风</p>
      <p>阿斯利康减肥风</p>
    </ph-window>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import {
  PhButtonGroup,
  PhButton,
  PhWindow,
  PhDivider,
  PhTab,
  PhTabPanel,
  PhView,
} from "@/index";
import * as Data from "../data/window";

export default defineComponent({
  data() {
    return {
      visible: false,
    };
  },
  setup() {
    return { ...Data };
  },
  methods: {
    open() {
      this.visible = true;
    },
    onDone() {
      this.visible = false;
    },
    onClose() {
      this.visible = false;
    },
    openConfirm() {
      this.$phConfirm("contentsss...").done((status: any) => {
        console.log(status);
      });
    },
    openAlert() {
      this.$phAlert("我爱你，中国");
    },
  },
  components: {
    PhButtonGroup,
    PhButton,
    PhWindow,
    PhDivider,
    PhTab,
    PhTabPanel,
    PhView,
  },
});
</script>
